<template>
  <div class="app-container">
    <!--  统计图表  -->
    <div v-show="showCharts">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <BarChart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <RatioChart />
          </div>
        </el-col>
      </el-row>
    </div>
    <!--  刷新表格 和 隐藏表格  -->
    <div class="top-right-btn">
      <el-tooltip class="item" effect="dark" :content="showCharts ? '隐藏表格' : '显示表格'" placement="top">
        <el-button circle icon="el-icon-s-data" @click="toggleChart()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip>
    </div>
    <!--  数据列表  -->
    <div>
      <el-table v-loading="loading" :data="personList">
        <el-table-column type="index" width="50" align="center" />
        <el-table-column label="姓名" prop="nickName" align="center" />
        <el-table-column label="现有积分" prop="possess" align="center" />
        <el-table-column label="历史总计" prop="total" align="center" />
        <el-table-column label="历史消耗" prop="consume" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-s-order"
              @click="showPersonDetail(scope.row)"
            >明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  分页  -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import BarChart from './BarChart'
import RatioChart from './RatioChart'
import { listStatistic } from '@/api/integral/statistic'

export default {
  name: 'Statistics',
  components: {
    BarChart,
    RatioChart
  },
  data() {
    return {
      // 按人分类的积分列表
      personList: [],
      // 显示表格
      showCharts: true,
      loading: false,
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        communityId: null,
        possess: null,
        total: null,
        consume: null
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      console.log('===============')
      this.loading = true
      listStatistic(this.queryParams).then(response => {
        this.personList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    toggleChart() {
      this.showCharts = !this.showCharts
    },
    // 跳转到明细
    showPersonDetail(person) {
      this.$router.push({
        path: 'integraldetail',
        query: {
          person
        }
      })
    }
  }
}
</script>

<style>
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
</style>
